<script>

        // Initialize walkthrough

        initializeWalkthrough(userFactory.getWalkthrough());

    

        $("#analytics_help").click(function(e) {
               e.preventDefault();
               userFactory.setWalkthrough('analytics_help');
               initializeWalkthrough(userFactory.getWalkthrough());
        });


    

        // Begin walkthrough tour module for tutorial Help
        
         function initializeWalkthrough (walkthrough) {
           
          if (walkthrough == 'default' || walkthrough == 'newcontext' || walkthrough == 'analytics_help' || walkthrough == "tldr" || walkthrough == "insight" || walkthrough == "force" || walkthrough == "seo" || walkthrough == "explore") {           
           // Instance the tour
             var tour = new Tour({
               storage: window.localStorage,
               name: 'default',
               steps: [
               {
                 element: "#entryform",
                 orphan: true,
                 placement: "top",
                 title: "Welcome to InfraNodus",
                 content: "Please, follow this step-by-step tutorial to get the most out of this tool. It will only take you 3 minutes and you will learn how to visualize any text as a network, detect the main topics, the relations between them, learn more about the structure of the discourse, compare them, find the structural gaps (that's where the new ideas are!), and perform your research in a more efficient way.",
               },
               {
                 element: "#entryform",
                 orphan: true,
                 placement: "top",
                 title: "Adding Data...",
                 content: "You can start typing your ideas and notes here. Press Enter or Save to submit. They will be visualized as a graph.",
                 onNext: function (tour) {
                     $('#statement').val('Every word you type is a node in a graph. When the words cooccur together, they are connected.');
                 }
               },
               {
                 element: "#statement",
                 placement: "top",
                 title: "Try to Add this Statement Now...",
                 content: "You can add this statement or edit and add your own. Then press the SAVE button... <br>(You will be able to delete it later).",
                 onNext: function (tour) {
                     $('#statement').val('');
                 }
               },
               {
                 element: ".entry:last",
                 orphan: true,
                 placement: "auto",
                 title: "See the Statements",
                 content: "You will then see this statement appear here. To see it in the graph, click on it once. To edit or to delete it, click Edit. You can select a few statements at once. Click Deselect to reset the selection."
               },
               {
                 element: "#entryform",
                 orphan: true,
                 placement: "top",
                 title: "Mindmapping Using #Hashtags and @Mentions",
                 content: "You can also use #hashtags and @mentions to create nodes and edges in the graph, which makes InfraNodus the fastest mind-mapping software out there. #Hashtags connect to each other, @Mentions connect to everything. For example, see how the following statement will get visualized. You can adjust this behavior in <a href='/settings'>Settings</a>",
                 onNext: function (tour) {
                     $('#statement').val('One #hashtag will connect to a #different_hashtag and they both will connect to a @mention. The rest of the text is not visualized then.');
                 }
               },
               {
                 element: "#statement",
                 placement: "top",
                 title: "Try to Add this Statement Now...",
                 content: "You can add this statement or edit and add your own. Then press the SAVE button... <br>(You will be able to delete it later).",
                 onNext: function (tour) {
                     $('#statement').val('');
                 }
               },
               {
                 element: ".entry:last",
                 orphan: true,
                 placement: "auto",
                 title: "It Appears Here and on the Graph",
                 content: "You will then see this statement appear here. To see it in the graph, click on it once. To edit or to delete it, click Edit. You can select a few statements at once. Click Deselect to reset the selection."
               },
               {
                 element: "#statement",
                 placement: "top",
                 title: "Delete Statements",
                 content: "If you click on any statement and then click Edit, it appears here. Then simply click the Delete icon below the statement and it will be removed. You can also Edit and click Edit. Or Cancel."
               },
               {
                 element: "#deletecontextbutton",
                 placement: "top",
                 title: "Delete The Whole Graph",
                 content: "Careful! If you click this button, you will delete the whole graph with all its contents. It cannot be undone."
               },
               {
                 element: "#import-link",
                 placement: "top",
                 title: "Import Statements",
                 content: "You can also import any data from a PDF / TXT file, a URL (inc Wikipedia), RSS Feeds, Twitter, Google search results, your notes, etc.<br>If you already have a few nodes in this graph, you can select them, and then import relevant search results to a new graph and then compare them to your original one."
               },
               {
                 element: "#menuLink",
                 title: "Context Menu",
                 content: "You can navigate using this menu here. Here you can choose another context (list / graph / set), add a new one, or see all of them at once.",
                 onShow: function (tour) {
                     $('#menuLink').click();
                 }
               },
               {
                 element: "#graph-link",
                 placement: "left",
                 title: "Hide/Show Edit Pane",
                 content: "You can use this button to hide / show the edit pane, so you can clearly see the graph.",
                 onShow: function (tour) {
                     $('#menuLink').click();
                     $('#graph-link').click();
                 }
               },
               {
                 element: "#statements-link",
                 placement: "right",
                 title: "Hide/Show Statements",
                 content: "You can also use this button to hide the text but to leave the edit pane on.",
                 onShow: function (tour) {
                     $('#graph-link').click();
                 }
               },
               {
                 element: "#walkthrough",
                 placement: "left",
                 title: "This Tutorial",
                 content: "If, at any point, you want to see this tutorial again, click here.",

               },
               {
               element: "#globalsearchinput",
               placement: "bottom",
               title: "Global Search",
               content: "You can use this field to search a term among all your graphs. Select a few nodes and click the Search button. Your private graphs and others' public ones will appear as the squares here. Click them to open the graphs with your selections.",
               },
               {
               element: "#addcontext-link",
               placement: "right",
               title: "Compare Different Graphs and Texts",
               content: "You can compare two different graphs using this feature. Click this button once, then go to the menu and select another graph, click it again and you'll see the intersection graph between the two texts. ",
               },
               {
               element: "#timer-link",
               placement: "right",
               title: "Visualize the Dynamic Graph's Evolution",
               content: "Click this button and then when you scroll through your statements, you'll see them visualized one by one",
               },
               {
               element: "#watch-link",
               placement: "right",
               title: "Play Back and Watch",
               content: "If you don't want to scroll yourself, click this button and the graph will play automatically. It is great for a visualization. You can leave it on while adding the new statements as well.",
               },
               {
                 element: "#microphone-link",
                 orphan: true,
                 placement: "right",
                 title: "Voice to Text Input",
                 content: "If you use Chrome browser, you can also turn on Voice to Text input. Great for interviews and when you're lazy to type. English, French, German and Russian."
               },
               {
                 element: "#graph-container",
                 placement: "top",
                 title: "Use the Graph",
                 content: "You can click on the nodes on the graph to see what they're connected to and to filter the statements, which contain them."
               },
               {
                 element: "#analyticsbutton",
                 placement: "left",
                 title: "Text / Graph Analytics",
                 content: "Here you can see the main topics identified in the graph and the main keywords / nodes and click them to get more insights about the graph. You can also discover what questions to ask to make your discourse more connected.",
                 onShow: function (tour) {
                     $('#graph-link').click();
                     if ($('#analytics').is(":visible")) {
                     }
                     else {
                       $('#analyticsbutton').click();
                     }
                 }
               },
               {
                 element: "#analytics",
                 placement: "auto",
                 title: "How to Analyze the Graph",
                 content: "The top topics are identified according to Louvain community detection algorithm (Blondes et al 2008). It detects the words that co-occur more often together than others and puts them into the same community (designated with a specific color)."
               },
               {
                 element: "#analytics",
                 placement: "auto",
                 title: "Most Influential Words",
                 content: "The most influential words are the words in the graph that have the highest betweenness centrality — they appear most often on the shortest path between any two randomly chosen words. It means they serve as the 'crossroads' of meaning, often linking different contexts together. This is not the same as the most frequently used words, rather these words connect the different topics in this discourse. (it is also possible to use degree as the most influential words setting)"
               },
               {
                 element: "#graphstats",
                 placement: "top",
                 title: "Graph Stats",
                 content: "We use our own measure of <a href='https://noduslabs.com/research/visualization-text-polysingularity-network-analysis/' target='_blank'>discourse polysingularity</a> (Paranyushkin 2012, 2018) to score the discourse visualized based on the structure of the graph. <br><b>'Sparse'</b> — indicates a fragmented discourse (e.g. poetry, the beginning of a research, etc.) <br><b>'Diversified'</b> — indicates a discourse with a high level of plurality.<br><b>'Focused'</b> — prioritizes one or two topics. <br><b>'Biased'</b> — an agenda or mobilizing action present (e.g. advertising, ideology, manifesto)."
               },
               {
                 element: "#biasindex",
                 placement: "top",
                 title: "Bias Level",
                 content: "This measures the level of diversity in the graph: if it consists of disjointed islands it's 'dispersed'; if those islands are interconnected, there are several topics within, it's 'diversified'; if most of the nodes are in one topic it's 'focused', if it's tightly interconnected and there are no distinct topical clusters, it's 'biased'. Read more about the methology in our <a href='https://towardsdatascience.com/measuring-discourse-bias-using-text-network-analysis-9f251be5f6f3' target='_blank'>Identifying the Discourse Bias</a> (Paranyushkin 2018) article in Towards Data Science."
               },
               {
                 element: "#graph-container",
                 placement: "bottom",
                 title: "Discover New Ideas",
                 content: "You can also discover new ideas if you look for the gaps inside the graph.",
                 onShow: function (tour) {
                     $('#graph-link').click();
                 }
               },
               {
                 element: "#go_next",
                 placement: "left",
                 title: "Search the Web",
                 content: "Once you select a few nodes in the graph, you can click this to search them on the web.",
                 onShow: function (tour) {
                   if ($('#analytics').is(":visible")) {
                      $('#analyticsbutton').click();
                   }
                 }
               },
               {
                 element: "#collaborate-link",
                 title: "Collaborate",
                 placement: "top",
                 content: "You can invite somebody to collaborate and to work with you on this graph. Click on this button to copy and paste the URL and then send it to your collaborators."
               },
               {
                 element: "#privacy-link",
                 title: "Privacy / Embed",
                 placement: "top",
                 content: "All your data is private by default and cannot be seen by anybody. You can make this graph public and then embed it on any other html page. Just click this button and then copy and paste the URL or the embed code."
               },
               {
                 element: "#settingspane",
                 title: "Settings Pane",
                 content: "Here you can log out, adjust the settings, and export your graph in any format for further visualization using Gephi or any other software.",
                 onShow: function (tour) {
                     $('#menuLink').click();
                 }
               },
               {
                 element: "#addNewContext",
                 title: "Add a New Context",
                 content: "You can add a new context here (click, type in the new name and click Enter to save). Think of contexts as lists or folders. You can store different notes there or you can organize them by hashtags."
               },
               {
                 element: "#improve-layout",
                 title: "Improve Graph Layout",
                 placement: "left",
                 content: "You can use this button to improve the graph's layout.",
                 onShow: function (tour) {
                     $('#menuLink').click();
                 }
               },
               {
                 element: "#abstract-layout",
                 title: "Show Abstract Layout",
                 placement: "left",
                 content: "Click this button to see an abstract representation of the graph."
               },
               {
                 element: "#graph-tools",
                 placement: "left",
                 title: "Zoom In / Zoom Out",
                 content: "Use these buttons to zoom in and zoom out (or scroll your trackpad or pinch your iPad/iPhone)"
               },
               {
                 element: "#reloadbutton",
                 placement: "left",
                 title: "Reload Graph",
                 content: "If, at any point, something goes wrong, you can always click this to reload the graph."
               },
               {
                 element: "#summary",
                 placement: "bottom",
                 title: "Essence / Summary",
                 content: "Click here to filter the most essential statements from the discourse. These will be the ones that contain the key terms (the main topical clusters) of the discourse as identified in the Analytics pane.",
                 onShow: function (tour) {
                     $('#summary').click();
                     if ($('#analytics').is(":visible")) {
                     }
                     else {
                       $('#analyticsbutton').click();
                     }
                 }
               },
               {
                 element: "#insight",
                 placement: "bottom",
                 title: "Insight",
                 content: "Click here to generate new ideas: we will show you the two topical clusters and the associated statements, which could be linked together to get a new insight into the discourse or to develop it further (depending on its structure).",
                 onShow: function (tour) {
                     $('#insight').click();
                 }
               },
               {
                 element: "#walkthrough",
                 placement: "left",
                 title: "Interactive Help",
                 content: "When you want to see this guide again, click here.",
                 onShow: function (tour) {
                     if ($('#analytics').is(":visible")) {
                        $('#analyticsbutton').click();
                     }
                     $('#overview').click();
                 }
               }

             ]});

            //  New context tutorial? Do not show it if it's been shown before
             if (userFactory.getViewOption('forced_walkthrough') == '1') {
               tour._options.storage = false;
               if (walkthrough == 'explore') {
                  window.localStorage.removeItem('explore_current_step');
                  window.localStorage.removeItem('explore_end');
               }
               else if (walkthrough == 'seo') {
                  window.localStorage.removeItem('seo_current_step');
                  window.localStorage.removeItem('seo_end');
               }
               else if (walkthrough == 'insight') {
                  window.localStorage.removeItem('insight_current_step');
                  window.localStorage.removeItem('insight_end');
               }
               else if (walkthrough == 'tldr') {
                  window.localStorage.removeItem('tldr_current_step');
                  window.localStorage.removeItem('tldr_end');
               }
             }

             if (walkthrough == 'default') {
                  window.localStorage.removeItem('default_current_step');
                  window.localStorage.removeItem('default_end');
               }

             if (walkthrough == 'tldr') {
             //  console.log(tour._options.steps);
               tour._options.name = 'tldr';
               tour._options.steps = [
               {
               element: "#graph-container",
               placement: "top",
               title: "Welcome to InfraNodus",
               content: "Text network visualization can be used ot make sense of a text or to gain a new perspective on it. It shows you how the most relevant terms, how they are connected, and what are the gaps between them. To proceed with this tutorial, please, click the Next button...",
               backdrop: true, 
               onShow: function (tour) {
                   $('#analytics').hide();
               }
               },
                 {
                 element: "#entryform",
                 placement: "right",
                 title: "Adding a Text",
                 content: "You can start typing here or simply copy and paste your notes or any text that you have. You can also use one of our <a id='import_link' href='/import?context='>import</a> functions.",
                 onShow: function(tour) {
                  insertUrlParam('forced_walkthrough', 0);
                  tour._options.storage = window.localStorage;
                 },
                 onShown: function(tour) {
                  $("#import_link").attr("href", "/import?context=" +  userFactory.getCurrentContext());
                 }
               },
               {
               element: "#graph-container",
               placement: "bottom",
               title: "Navigate the Graph",
               content: "You will then see a graph representation of this text. The most prominent terms will be shown as bigger nodes in the graph, those words, which are used in the same context will be closer to each other and have the same color.",
               },
               {
               element: "#graph-container",
               placement: "top",
               title: "Search through Text",
               content: "You can then click on the nodes in the graph to find the parts of the text that you find interesting.",
               },
               {
               element: "#graph-container",
               placement: "left",
               title: "Discover New Ideas",
               content: "The gaps in the graph will show you where you could do more research or what questions to ask.",
               },
               {
                 element: "#summary",
                 placement: "right",
                 title: "Essence / Summary",
                 content: "In the <strong>Summary</strong> tab you will see the most essential terms and topics from this text. You can use it to check which ideas your text relays and also click these words to learn more about the context they appear in.",
                 onShow: function (tour) {
                     $('#summary').click();
                 }
               },
               {
                 element: "#analytics",
                 placement: "left",
                 title: "Analytics",
                 content: "You can also see more information about these words in the Analytics panel.",
                 onShow: function (tour) {
                     if ($('#analytics').is(":visible")) {
                     }
                     else {
                       $('#analyticsbutton').click();
                     }
                 }
               },
               {
                 element: "#statsbutton",
                 placement: "left",
                 title: "Statistics",
                 content: "If you click on the Stats button you'll see much more stats and you can find the words that are important for discourse's conductivity and diversity.",
                 onShow: function (tour) {
                    $('#statsbutton').click();
                 }
               },
               {
                 element: "#stats_table",
                 placement: "left",
                 title: "Statistics Table",
                 content: "Scroll to the right of this table to see all the statistical parameters and sort out the nodes by their <strong>Conductivity</strong> to see what are the less frequent but more important words to this discourse.",
                
               },
               {
                 element: "#biasindex",
                 placement: "top",
                 title: "Network Structure Diversity",
                 content: "This measure shows how diverse or homogeneous the structure of your discourse is. The more diverse it is, the more different distinct topics it represents. The more homogeneous the network is, the more focused the discourse is on one particular topic.",
                 
               },
               {
                 element: "#insight",
                 placement: "bottom",
                 title: "Insight",
                 content: "You can use the <strong>Insight</strong> tab to generate new ideas: we will show you the two topical clusters and the associated statements, which could be linked together to get a new insight into the discourse or to develop it further (depending on its structure).",
                 onShow: function (tour) {
                      if ($('#analytics').is(":visible")) {
                        $('#analyticsbutton').click();
                      }        
                     $('#insight').click();
                 }
               },
               {
                 element: "#menuLink",
                 title: "Context Menu",
                 content: "You will be able to later find your text listed here, among other texts.",
                 onShow: function (tour) {
                     $('#menuLink').click();
                 }
               },
               {
                 element: "#walkthrough",
                 placement: "left",
                 title: "Detailed Tutorial",
                 content: "If, at any point, you want to see a more detailed Tutorial, click here.",
                 onShow: function (tour) {
                  $('#menuLink').click();
                     if ($('#analytics').is(":visible")) {
                        $('#analyticsbutton').click();
                     }
                     $('#overview').click();
                 }
               }
               ]
             }

             // Walkthrough options for exploration

             if (walkthrough == 'explore') {
             //  console.log(tour._options.steps);
               tour._options.name = 'explore';
               tour._options.steps = [
               {
               title: "Welcome to InfraNodus Knowledge Exploration App",
               content: "This step-by-step tour will guide you through the steps you need to take in order to discover more about a certain domain of knowledge using this tool. Try it out and if you understand how it works, you can always switch this tour off and do it on your own.",
               orphan: true, 
               backdrop: true, 
               onShow: function (tour) {
                   $('#analytics').hide();
                   $('#submitbutton').css('visibility', 'hidden');
               }
               },
                 {
                 element: "#entryform",
                 placement: "top",
                 title: "Defining a Topic",
                 backdrop: true, 
                 content: "Type in here any topic or a list of keywords you're interested in, for example, 'network analysis' <br><br><a href='javascript:' class='abutton' id='addsample'>Add a Sample Text Now</a> ",
                 onShown: function(tour) {
                  $('#addsample').click(function(e) {
                        e.preventDefault();
                        let sampletext = "network visualization";
                        $('#statement').val(sampletext);
                  });
                }
                 
               },
               {
               element: "#google-import",
               placement: "top",
               title: "Exploring the Context",
               backdrop: true, 
               content: "Then click 'import from google'. InfraNodus will take you to another page to confirm the settings and will then visualize the first 40 Google search results for this topic as a network graph. It will show you the context around the search terms you're looking for and how they connect.",
               onShow: function(tour) {
                tour._options.storage = window.localStorage;
               },
               onNext: function (tour) {
                     if ($('#statement').val().length > 0) {
                       $('#google-import').click();
                     }
                 }
               },
               {
               element: "#graph-container",
               placement: "top",
               title: "Graph Visualization",
               content: "The Google search results for the topics that you selected are visualized as a graph.<br>The bigger the nodes, the more influential are the words they represent to the topic you've chosen in the previous step. The words that tend to co-occur together are closer on the graph and have the same color. ",
               onShow: function(tour) {
                if ($('#analytics').is(":visible")) {
                      $('#analyticsbutton').click();
                     }
               }
               },
               {
               element: "#graph-container",
               placement: "left",
               title: "Graph Filtering",
               content: "You might want to select or remove some of the more obvious influential words from the graph to better see the context they appear in.<br><br>For example: <div id='top_nodes'></div><br><a href='javascript:' class='abutton' id='top_select'>Select the Top Nodes</a><br><br><a href='javascript:' class='abutton' id='top_delete'>Delete the Top Nodes</a><br>&nbsp;",
               onShown: function(tour) {
                  let top_nodes = graphFactory.getTopBCNodes(2);
                  let top_nodes_string = '';
                  let nodesToDelete = [];
                  for (let top_node in top_nodes) {
                      top_nodes_string += '<div class="inlinesquare '+top_nodes[top_node].key+'"></div> <a href="#" class="top_nodes">' + top_nodes[top_node].label + '</a> ';
                      nodesToDelete.push(top_nodes[top_node].label);
                  }
                  $('#top_nodes').html(top_nodes_string);
                  $('#top_delete').click(function(e) {
                        e.preventDefault();
                        graphFactory.deleteNodes(nodesToDelete);
                  });
                  $('#top_select').click(function(e) {
                        e.preventDefault();
                        for (let pin in  nodesToDelete) {
                          if (graphFactory.checkIfPinned(nodesToDelete[pin]) == false) {
                            graphFactory.addToPinnedNodes(nodesToDelete[pin]);
                          }

                        }        
                  });
               }
               },
               {
               element: "#graph-container",
               placement: "top",
               title: "Search through Text",
               content: "You can then click on the nodes in the graph to find the parts of the text that you find interesting.<br><br>You can also remove them from the graph to better see the context around them.",
               },
               {
               element: "#deletenodes",
               placement: "bottom",
               title: "Delete Nodes",
               content: "If you selected some nodes, you can temporarily delete them from the graph if you click this button.<br><br>Then the other influential nodes will pop up, giving you a more in-depth information about the context.",
               },
               {
               element: "#stopnodeslist",
               placement: "bottom",
               title: "Undo Delete Nodes",
               content: "You can also click the deleted nodes to get them back into the graph again. The statistics will instantly be updated.",
               },
               {
               element: "#graph-container",
               placement: "left",
               title: "Discover New Ideas",
               content: "The gaps in the graph will show you where you could do more research or what questions to ask.",
               },
               {
                 element: "#summary",
                 placement: "right",
                 title: "Essence: Topic Modeling",
                 content: "Using the <strong>Summary</strong> tab you can see the most essential terms and topics from this text. You can use it to check which ideas your text relays and also click these words to learn more about the context they appear.",
                 onShow: function (tour) {
                     $('#summary').click();
                 }
               },
               {
                 element: "#analytics",
                 placement: "left",
                 title: "Analytics",
                 content: "You can also see more information about these words in the Analytics panel.",
                 onShow: function (tour) {
                     if ($('#analytics').is(":visible")) {
                     }
                     else {
                       $('#analyticsbutton').click();
                     }
                 }
               },
               {
                 element: "#statsbutton",
                 placement: "left",
                 title: "Statistics",
                 content: "If you click on the Stats button you'll see much more stats and you can find the words that are important for discourse's conductivity and diversity.",
                 onShow: function (tour) {
                    $('#statsbutton').click();
                 }
               },
               {
                 element: "#stats_table",
                 placement: "left",
                 title: "Statistics Table",
                 content: "Scroll to the right of this table to see all the statistical parameters and sort out the nodes by their <strong>Conductivity</strong> to see what are the less frequent but more important words to this discourse.",
                
               },
               {
                 element: "#biasindex",
                 placement: "top",
                 title: "Network Structure Diversity",
                 content: "This measure shows how diverse or homogeneous the structure of your discourse is. The more diverse it is, the more different distinct topics it represents. The more homogeneous the network is, the more focused the discourse is on one particular topic.",
                 
               },
               {
                 element: "#insight",
                 placement: "bottom",
                 title: "Insight",
                 content: "Using the <strong>Insight</strong> tab you can generate new ideas: we will show you the two topical clusters and the associated statements, which could be linked together to get a new insight into the discourse or to develop it further (depending on its structure).",
                 onShow: function (tour) {
                      if ($('#analytics').is(":visible")) {
                        $('#analyticsbutton').click();
                      }        
                     $('#insight').click();
                 }
               },
               {
                 element: "#menuLink",
                 title: "Context Menu",
                 content: "You will be able to later find your text listed here, among other texts.",
                 onShow: function (tour) {
                     $('#menuLink').click();
                 }
               },
               {
                 element: "#walkthrough",
                 placement: "left",
                 title: "Detailed Tutorial",
                 content: "If, at any point, you want to see a more detailed Tutorial, click here.",
                 onShow: function (tour) {
                  $('#menuLink').click();
                     if ($('#analytics').is(":visible")) {
                        $('#analyticsbutton').click();
                     }
                     $('#overview').click();
                 }
               }
               ]
             }


            // Walkthrough options for exploration

            if (walkthrough == 'seo') {
             //  console.log(tour._options.steps);
               tour._options.name = 'seo';
               tour._options.steps = [
               {
               title: "Search Engine Optimization with InfraNodus",
               content: "You can use InfraNodus to identify the content you need to create <strong>to fill in the gap</strong> between <strong>what people search for</strong> and <strong>what they actually find</strong> on Google. <br><br>We've tried this approach many times and it works consistently by pushing your content at the top of the search results pages, even for more generic requests.",
               orphan: true, 
               backdrop: true, 
               onShow: function (tour) {
                   $('#analytics').hide();
                   $('#google-import').css('visibility', 'hidden');
                   $('#file-import').css('visibility', 'hidden');
                   if (statements().areVisible() == 'HIDDEN') {
                          statementsFactory.toggleStatementsTo('VISIBLE');
                     }
               }
               },
               {
               element: "#entryform",
               placement: "top",
               title: "Find What People Search For",
               content: "First, let's find out <strong>what people search for</strong> when they type in the query you're interested in.<br><br>In order to do that, define a search query (e.g. 'network visualization') and use Google Keywords Planner to get the related search query suggestions.",
               },
               {
               element: "#entryform",
               placement: "top",
               title: "Find What People Search For",
               content: "<strong>Step 1:</strong> Open <a href='https://ads.google.com/aw/keywordplanner/home' target='_blank'>Google Keyword Planner Tool</a> in a new window and click <strong>'Discover new keywords'</strong>.<br><br><strong>Step 2:</strong> Now enter your search query in that field and see the suggestions that Google proposes.<br><br><strong>Step 3:</strong> Click <strong>Download keyword ideas</strong>, get the CSV file, then open it in Excel or Google Docs, <br><br><strong>Step 4:</strong> Copy and paste the column with the keywords here. <br><br><a href='javascript:' class='abutton' id='addsample'>Add Sample Keywords Now</a> ",
               onShown: function(tour) {
                  $('#addsample').click(function(e) {
                        e.preventDefault();
                        let sampletext = "network visualization\nnetwork graph\nd3 network graph\npython network graph\nnetwork graph visualization";
                        $('#statement').val(sampletext);
                  });
               },
               },
               {
               element: "#submitbutton",
               placement: "top",
               title: "Visualize Google's Suggestions",
               content: "Now click the Save button to overlay Google's suggestions for this search term on top of the existing search results graph.",
               onShow: function(tour) {
                insertUrlParam('forced_walkthrough', 0);
                tour._options.storage = window.localStorage;
               },
               onNext: function (tour) {
                     if ($('#statement').val().length > 0) {
                       $('#submitbutton').click();
                     }
                     else {
                       alert('We highly recommend you to copy and paste the keyword suggestions here to better understand this tutorial.')
                     }
                 }
               },
               {
               element: "#graph-container",
               placement: "top",
               title: "Graph Visualization",
               content: "You can now see the <strong>most common search patterns</strong> for your specific search query visualized as a graph.<br><br>The bigger the nodes, the more influential are the words they represent to the topic you've chosen in the previous step. The <strong>words that tend to co-occur together</strong> are closer on the graph and have the same color. ",
               onShow: function(tour) {
                $('#google-import').css('visibility', 'visible');
                $('#file-import').css('visibility', 'visible');
                if ($('#analytics').is(":visible")) {
                      $('#analyticsbutton').click();
                }
               }
               },
               {
               element: "#graph-container",
               placement: "top",
               title: "Graph Filtering",
               content: "You might want to select or remove some of the more obvious influential words from the graph to better see the context they appear in.<br><br>For example: <div id='top_nodes'></div><br><a href='javascript:' class='abutton' id='top_select'>Select the Top Nodes</a><br><br><a href='javascript:' class='abutton' id='top_delete'>Delete the Top Nodes</a><br>&nbsp;",
               onShown: function(tour) {
                  let top_nodes = graphFactory.getTopBCNodes(2);
                  let top_nodes_string = '';
                  let nodesToDelete = [];
                  for (let top_node in top_nodes) {
                      top_nodes_string += '<div class="inlinesquare '+top_nodes[top_node].key+'"></div> <a href="#" class="top_nodes">' + top_nodes[top_node].label + '</a> ';
                      nodesToDelete.push(top_nodes[top_node].label);
                  }
                  $('#top_nodes').html(top_nodes_string);
                  $('#top_delete').click(function(e) {
                        e.preventDefault();
                        graphFactory.deleteNodes(nodesToDelete);
                  });
                  $('#top_select').click(function(e) {
                        e.preventDefault();
                        for (let pin in  nodesToDelete) {
                          if (graphFactory.checkIfPinned(nodesToDelete[pin]) == false) {
                            graphFactory.addToPinnedNodes(nodesToDelete[pin]);
                          }

                        }        
                  });
               },
               onShow: function(tour) {
                if (statements().areVisible() == 'HIDDE') {
                          statementsFactory.toggleStatementsTo('VISIBLE');
                     }
               }
              
               },
               {
                 element: "#entryform",
                 placement: "top",
                 title: "What People Actually Find",
                 backdrop: true, 
                 content: "Now that you know what people search for, it's time to see what they <strong>actually find</strong>.<br><br> In order to do that, let's import Google search results for your search query. <strong>Please, type it in below</strong> or <br><br><a href='javascript:' class='abutton' id='addsample'>Add a Sample Text Now</a> ",
                 onShown: function(tour) {
                  $('#addsample').click(function(e) {
                        e.preventDefault();
                        let sampletext = "network visualization";
                        $('#statement').val(sampletext);
                  });
                }
                 
               },
               {
               element: "#google-import",
               placement: "top",
               title: "Exploring the Context",
               backdrop: true, 
               content: "Then click 'import from google'. InfraNodus will take you to another page to confirm the settings and will then visualize the first 40 Google search results for this topic as a network graph. It will show you the context around the search terms you're looking for and how they connect.",
               onNext: function (tour) {
                     if ($('#statement').val().length > 0) {
                       tour._options.storage = window.localStorage;
                       $('#google-import').click();
                     }
                     else {
                      alert('We highly recommend you to type in a search query here, so you can better understand how Google import works...')
                     }
                 }
               }, 
               {
               element: "#graph-container",
               placement: "top",
               title: "See the Difference",
               content: "You will now see highlighted (in blue) the <strongs>search terms, which people are looking for, but that do not exist in Google's search results.</strong> <br><br>For example: <div id='top_missing'></div><br><br>You can try clicking those words above to see the context they appear in or to delete them, so you can see other words, which exist in the keywords suggestions, but not in the search results.",
               
                onShow: function (tour) {
                     if ($('#analytics').is(":visible")) {
                      $('#analyticsbutton').click();
                     }
                     if (statements().areVisible() == 'VISIBLE') {
                          statementsFactory.toggleStatementsTo('HIDDEN');
                     }
                 },
                 onShown: function(tour) {
                  $('#top_missing').html($('#top_missing_analytics').html());
                 }
                
               },
               {
               element: "#diffcontext-link",
               placement: "right",
               title: "Graph Diff Feature",
               content: "This parameter here is ON, which means that now you're looking at the Graph Diff feature, highlighting the differences between the two graphs.",
               onNext: function (tour) {
                     if ($('#analytics').is(":visible")) {
                     }
                     else {
                       $('#analyticsbutton').click();
                     }
                 }
                
               },
               {
               element: "#addcontext_stats",
               placement: "left",
               title: "Missing Terms",
               content: "This info pane in the Analytics panel will list the most influential words, which are <strong>present in Google's keywords suggestions</strong> (what people search for), but that are <strong>not present in Google's search results</strong> (what they actually find).<br><br><strong>Top keywords to promote:</strong> <div id='top_missing'></div>",
               onShow: function (tour) {
                    if (statements().areVisible() == 'VISIBLE') {
                          statementsFactory.toggleStatementsTo('HIDDEN');
                    }
                 },
                 onShown: function(tour) {
                  $('#top_missing').html($('#top_missing_analytics').html());
                 }
               },
               {
                 orphan: true,
                 title: "What to do with this information?",
                 content: "Now that you've identified the words that are <strong>present</strong> in users' requests but are <strong>absent</strong> in Google's search results, you can <strong>create the content that will fulfil in this gap</strong> and, therefore, be promoted by search engines to your readers.",
               },
              
               ]
             }

             // Walkthrough option for generating insight

              if (walkthrough == 'insight') {
              //  console.log(tour._options.steps);
              tour._options.name = 'insight';
               tour._options.steps = [
               {
               title: "Welcome to InfraNodus Insight Generation",
               content: "Using this tool you can generate insight, new ideas, and your own personal eureka moments. We will now lead you through this process.",
               backdrop: true, 
               orphan: true, 
               onShow: function (tour) {
                   $('#analytics').hide();
               }
               },
                 {
                 element: "#entryform",
                 placement: "top",
                 title: "Getting Your Data",
                 backdrop: true, 
                 content: "In order to start, you will need to add a text that you already wrote before here. It can be: <ul><li>An abstract of your paper</li><li>A collection of your notes</li><li>A text that you wrote</li><li>Some ideas in free form</li></ul>If you don't have anything, you can just write a few statements that describe the area of your current interest.",
               },
                 {
                 element: "#entryform",
                 placement: "top",
                 title: "Adding a Text",
                 backdrop: true, 
                 content: "Please, write something or copy and paste the existing text into this field and tap the 'SAVE' button. <br> <br> We highly recommend that you take your time and add something here, because it will make this tutorial clearer for you.<br><br><a href='javascript:' class='abutton' id='addsample'>Add a Sample Text Now</a> ",
                onShown: function(tour) {
                  $('#addsample').click(function(e) {
                        e.preventDefault();
                        let sampletext = "In this paper we present a web-based open source tool and a method for generating insight from any text or discourse using text network analysis. The tool (InfraNodus) can be used by researchers and writers to organize and to better understand their notes, to measure the level of bias in discourse, and to identify the parts of the discourse where there is a potential for insight and new ideas. The method is based on text network analysis algorithm, which represents any text as a network and identifies the most influential words in a discourse based on the terms' co-occurrence. Graph community detection algorithm is then applied in order to identify the different topical clusters, which represent the main topics in the text as well as the relations between them. The community structure is used in conjunction with other measures to identify the level of bias or cognitive diversity of the discourse. Finally, the structural gaps in the graph can indicate the parts of the discourse where the connections are lacking, therefore highlighting the areas where there’s a potential for new ideas. The tool can be used as stand-alone software by end users as well as implemented via an API into other tools. Another interesting application is in the field of recommendation systems: structural gaps could indicate potentially interesting non-trivial connections to any connected datasets.";
                        $('#statement').val(sampletext);
                  });
                  
                },
                onShow: function(tour) {
                  insertUrlParam('forced_walkthrough', 0);
                  tour._options.storage = window.localStorage;
                 },
                 onNext: function (tour) {
                     if ($('#statement').val().length > 0) {
                       $('#submitbutton').click();
                     }
                 }
               },
               {
               element: "#graph-container",
               placement: "top",
               title: "Text Network Visualization",
               content: "Once your text is processed, it will be visualized as a graph.<br><br>The <strong>colors</strong> indicate the words that belong to the same topic and are more often used in the same context. <br><br>The <strong>node size</strong> indicates the importance of the words (based on how connected they are to the whole discourse).<br><br>Science: <a href='http://bit.ly/wwwinfranodus'>PDF whitepaper</a>",
               },
               {
               element: "#graph-container",
               placement: "left",
               title: "Analyze the Graph",
               content: "Already by looking at this graph you can have a good overview of your ideas and the relations between them.<br><br>But what we're interested in are the gaps!",
               },
               {
                 element: "#insight",
                 placement: "bottom",
                 title: "Insight",
                 backdrop: true, 
                 content: "This is the insight panel. <br><br>Our algorithm will <strong>analyze the structure of your text network graph</strong> and show you the <strong>two topical clusters</strong> which could be <strong>linked together</strong> to generate insight and develop the text further.",
                 onShow: function (tour) {
                      if ($('#analytics').is(":visible")) {
                        $('#analyticsbutton').click();
                      }        
                     $('#insight').click();
                 }
               },
               {
                 element: "#insightclusters",
                 placement: "right",
                 title: "Structural Gaps",
                 backdrop: true, 
                 content: "This approach is based on identifying <strong>the structural gaps</strong> in the discourse: something you've mentioned but didn't yet connect. <br><br>All you need to do then is to <strong>ask yourself a question</strong> that would link these two clusters together. <div id='recommenderwalkthrough'></div>",
                 onShown: function(tour) {
                   $('#recommenderwalkthrough').html('<br>For example: ' + $('#recommendedquestion').text());
                 }
               },
               {
                 element: "#entryform",
                 placement: "top",
                 title: "Adding More Text",
                 content: "You can add the answer to this question (or some new ideas) here, in order to improve the structure of your discourse and to generate a new recommendation.<div id='recommenderwalkthrough'></div>",
                 onShown: function(tour) {
                   $('#recommenderwalkthrough').html('<br>For example, <strong>type in the answer to this question</strong>: ' + $('#recommendedquestion').text());
                 }
               },
               {
                 element: "#graph-container",
                 placement: "top",
                 title: "Structural Gaps",
                 content: "You can, of course, see these same <strong>structural gaps</strong> shown on the graph (that's how we identify them) — a visual aid to help you generate new ideas.<br><br><strong>Every time you see a gap, ask yourself what idea could bridge it.</strong> This might be your next creation!<br><br>If you're interested in the science behind this approach, check out our article <a href='https://towardsdatascience.com/measuring-discourse-bias-using-text-network-analysis-9f251be5f6f3' target='_blank'>Identifying the Discourse Bias</a> (Paranyushkin 2018) article in Towards Data Science.",
                 
               },
            
               {
                 element: "#summary",
                 placement: "right",
                 title: "Essence / Summary",
                 content: "Click here to see the most essential terms and topics from this text. <br><br>You can use it to check which ideas your text relays and also click these words to learn more about the context they appear in.",
                 onShow: function (tour) {
                     $('#summary').click();
                 }
               },
     
               {
                 element: "#walkthrough",
                 placement: "left",
                 title: "Detailed Tutorial",
                 content: "If, at any point, you want to see a more detailed Tutorial, click here.",
                 onShow: function (tour) {
                  $('#insight').click();
                 }
               }
               ]
             }

             // Another walkthrough option passed through the URL

             if (walkthrough == 'analytics_help') {
             //  console.log(tour._options.steps);
               tour._options.name = 'analytics';
               tour._options.steps = [
               {
                 element: "#analytics",
                 placement: "top",
                 title: "How to Analyze the Graph",
                 content: "This walkthrough will help you understand the different measures used when analyzing the graph. <br><br>You can also refer to and cite our paper: Paranyushkin, D (2019). <strong>InfraNodus: Generating Insight Using Text Network Analysis</strong>, Proceedings of WWW ’19 The World Wide Web Conference, Pages 3584-3589, San Francisco, CA, USA — May 13 – 17, 2019. Available as an HTML Version in <a href='https://dl.acm.org/citation.cfm?id=3314123' target='_blank' rel='nofollow'>ACM Library</a> or as a <a href='http://bit.ly/wwwinfranodus'>Free PDF Download</a>" 
                },
                {
                 element: "#analytics",
                 placement: "top",
                 title: "Graph Visualization",
                 content: "On the graph, every node is a word and every co-occurrence is a connection between them. The nodes that tend to appear more often together are shown closer on the graph. This way you get the next generation tag cloud: emphasizing not only the most relevant words, but also showing which context they appear in." 
                },
                {
                 element: "#statsbutton",
                 placement: "left",
                 title: "Graph Statistics",
                 content: "If you would like to see the network graph statistics for every node of the graph, you can click this button. You can then export this table as a CSV or Excel file for further analysis." 
                },
                {
                 element: "#stats_table",
                 placement: "left",
                 title: "Node Statistics Table",
                 content: "In this table you can see the basic metrics for every node. Click each column to sort by that parameter. <br><br><strong>Degree</strong> — shows how many connections the node has: correlates with the frequency. <br><strong>Frequency</strong> — how often the word appears in the text. <br><strong>Betweenness</strong> — normalized measure of betweenness centrality: how often the node appears on the shortest path between any two randomly chosen nodes in the graph. Measures global influence. <br><strong>Topic</strong> — which topical cluster the node belongs to — userful for classification. <br><strong>Conductivity</strong> — Betweenness divided by Degree: which nodes can reach the most nodes in the different parts of the network faster with the least connections. <br><strong>Locality</strong> — Degree squared divided by Betweenness: Local influencers with the least global connections. <br><strong>Diversivity</strong> — Betweenness divided by Frequency: highest global connectivity with the least mentions - indicates the turning points that produce the narrative plot shifts." 
                },
               {
                 element: "#maintopics",
                 placement: "left",
                 title: "Main Topical Groups",
                 content: "The top topics are identified according to Louvain community detection algorithm (<a href='https://iopscience.iop.org/article/10.1088/1742-5468/2008/10/P10008/meta' rel='nofollow' target='_blank'>Blondel et al 2008</a>). It detects the words that co-occur more often together than others and puts them into the same community (designated with a distinct color each). We range them either according to the degree or the number of connections that each node has (default measure — correlates with the node's frequency) or betweenness centrality (see <a href='/settings'>settings</a>)."
               },
               {
                 element: "#mostinfluential",
                 placement: "left",
                 title: "Most Influential Words",
                 content: "The most influential words are the words in the graph that have the highest <a href='https://www.eecs.wsu.edu/~assefaw/CptS580-06/papers/brandes01centrality.pdf' rel='nofollow' target='_blank'>betweenness centrality</a> (by defaut) — they appear most often on the shortest path between any two randomly chosen words. It means they serve as the 'crossroads' of meaning, often linking the different contexts or topical clusters together. This is not the same as the most frequently used words, rather these words connect the different topics in this discourse. (it is also possible to use degree as the most influential words if you change the <a href='/settings'>settings</a>)"
               },
               {
                 element: "#graphstats",
                 placement: "left",
                 title: "Graph Statistics",
                 content: "Here you can see some statistics about the graph. The total number of nodes displayed (can be changed in <a href='/settings'>settings</a>), the relation of total edges to nodes (the higher this number, the more densely connected the graph is), the average degree (how many nodes every node is connected to)."
               },
               {
                 element: "#diversity_score",
                 placement: "left",
                 title: "Diversity Score",
                 content: "We use <a href='http://bit.ly/wwwinfranodus'>Paranyushkin 2019</a> to score the level of diversity in the network based on the structure of the graph. <br><b>'Disperse'</b> — indicates a fragmented network, there are distinct communities but they are not connected (e.g. poetry, the beginning of a research, a nascent social network etc.) <br><b>'Diversified'</b> — indicates a network with a high level of plurality — there are distinct communities that are related on the global level and that can both propagate and retain information.<br><b>'Focused'</b> — prioritizes one or two communities or topics (e.g. news articles are often 'focused'). <br><b>'Biased'</b> — the network is highly homogeneous — an agenda or mobilizing action may be present (e.g. advertising, ideology, manifesto)."
               },
               {
                 element: "#diversity_score",
                 placement: "left",
                 title: "Diversity Score",
                 content: "The modularity measure that's higher than 0.4 indicates a highly pronounced community structure in the graph. <br><br>The number of nodes in the top topic indicates whether the influence is distributed evenly in the graph or if it's concentrated in one topic. Influence Dispersal shows how evenly the most influential nodes are distributed among the main communities in the graph. The low score means that most influential nodes are concentrated in one community."
               },
               {
                 element: "#recommendedquestion",
                 placement: "left",
                 title: "Insight",
                 content: "This measure identifies the structural gap in the graph: the part of the network between the two or several distinct communities that are not connected. Structural gaps are known to play an important role in social networks, where they indicate the areas of high potential. Answering the question that links the two disjointed parts of the graph together may lead to the new ideas and 'eureka' moments.",
               },
               {
                 element: "#miningbutton",
                 placement: "left",
                 title: "Latent Dirichlet Allocation",
                 content: "You can also compare the results obtained using network analysis to the popular topic detection method LDA - Latent Dirichlet Allocation. Both methods can compliment each other."
               },
               {
                 element: "#analytics",
                 placement: "left",
                 title: "More Information",
                 content: "For more information, please, refer to and cite our paper: Paranyushkin, D (2019). <strong>InfraNodus: Generating Insight Using Text Network Analysis</strong>, Proceedings of WWW ’19 The World Wide Web Conference, Pages 3584-3589, San Francisco, CA, USA — May 13 – 17, 2019. Available as an HTML Version in <a href='https://dl.acm.org/citation.cfm?id=3314123' target='_blank' rel='nofollow'>ACM Library</a> or as a <a href='http://bit.ly/wwwinfranodus'>Free PDF Download</a>.<br><br>Also, feel free to <a href='http://noduslabs.com/contact/'>contact us</a> if you have specific questions about the graph measures used." 
                },
               ]
             }

             if (walkthrough=='external') {

               var windowsize = $(window).width();
               if (windowsize <= 460) {
                  if (!$("#statements").is(":hidden")) {
                        $('#statements').hide();
                  }

               }
               tour._options.name = 'external';
               tour._options.steps = [
               {
               element: "#graph-container",
               placement: "bottom",
               title: "Welcome to InfraNodus",
               content: "Here you can see network visualization of the text on the left. The most prominent topics are shown as the bigger nodes in the graph. The words, which are more often used in the same context will be closer to each other. The different colors will show the topical clusters that belong together.",
               onShow: function (tour) {
                   $('#analytics').hide();
               }
               },
               {
               element: "#graph-container",
               placement: "top",
               title: "Search through Text",
               content: "You can then click on the nodes in the graph to find the parts of the text that you find interesting.",
               },
               {
               element: "#globalsearchinput",
               placement: "bottom",
               title: "Search in Graph",
               content: "You can also use this search field to look for the nodes in all your graphs.",
               },
               {
                 element: "#graph-link",
                 placement: "left",
                 title: "Hide/Show Statements",
                 content: "You can use this button to hide / show statements, so you can clearly see the graph.",
                 onShow: function (tour) {
                     $('#graph-link').click();
                 }
               },
               {
                 element: "#analyticsbutton",
                 placement: "left",
                 title: "Text / Graph Analytics",
                 content: "Here you can see the main topics identified in the graph and the main keywords / nodes and click them to get more insights about the graph. You can also discover what questions to ask to make your discourse more connected.",
                 onShow: function (tour) {
                     $('#graph-link').click();
                     if ($('#analytics').is(":visible")) {
                     }
                     else {
                       $('#analyticsbutton').click();
                     }
                 }
               },
               {
                 element: "#analytics",
                 placement: "auto",
                 title: "How to Analyze the Graph",
                 content: "The top topics are identified according to Louvain community detection algorithm (Blondes et al 2008). It detects the words that co-occur more often together than others and puts them into the same community (designated with a specific color)."
               },
               {
                 element: "#analytics",
                 placement: "auto",
                 title: "Most Influential Words",
                 content: "The most influential words are the words in the graph that have the highest betweenness centrality — they appear most often on the shortest path between any two randomly chosen words. It means they serve as the 'crossroads' of meaning, often linking different contexts together. This is not the same as the most frequently used words, rather these words connect the different topics in this discourse. (it is also possible to use degree as the most influential words setting)"
               },
               {
                 element: "#graphstats",
                 placement: "top",
                 title: "Graph Stats",
                 content: "We use our own measure of <a href='https://noduslabs.com/research/visualization-text-polysingularity-network-analysis/' target='_blank'>discourse polysingularity</a> (Paranyushkin 2012, 2018) to score the discourse visualized based on the structure of the graph. <br><b>'Sparse'</b> — indicates a fragmented discourse (e.g. poetry, the beginning of a research, etc.) <br><b>'Diversified'</b> — indicates a discourse with a high level of plurality.<br><b>'Focused'</b> — prioritizes one or two topics. <br><b>'Biased'</b> — an agenda or mobilizing action present (e.g. advertising, ideology, manifesto)."
               },
               {
                 element: "#biasindex",
                 placement: "top",
                 title: "Bias Level",
                 content: "This measures the level of diversity in the graph: if it consists of disjointed islands it's 'dispersed'; if those islands are interconnected, there are several topics within, it's 'diversified'; if most of the nodes are in one topic it's 'focused', if it's tightly interconnected and there are no distinct topical clusters, it's 'biased'. Read more about the methology in our <a href='https://towardsdatascience.com/measuring-discourse-bias-using-text-network-analysis-9f251be5f6f3' target='_blank'>Identifying the Discourse Bias</a> (Paranyushkin 2018) article in Towards Data Science."
               },
               {
               element: "#graph-container",
               placement: "bottom",
               title: "Discover the New Ideas",
               content: "The gaps in the graph will show you where you could do more research or what questions to ask."
               },
               {
                 element: "#walkthrough",
                 placement: "left",
                 title: "Detailed Tutorial",
                 content: "If, at any point, you want to see a this Tutorial again, click here.",
                 onShow: function (tour) {
                   if ($('#analytics').is(":visible")) {
                      $('#analyticsbutton').click();
                   }
                 }
               },
               {
                 element: "#menuLink",
                 title: "Create Your Own Graphs",
                 content: "To create your own text network visualizations, you can create a new account on <a href='https://infranodus.com'>InfraNodus.Com</a>.",
               }
               ]
             }

             // Initialize the tour
             tour.init();

             // Start the tour
             tour.start();
            }

           }
</script>